<!-- Widget --> <div class="widget widget-tabs widget-tabs-gray border-bottom-none"> <!-- Widget heading --> <div class="widget-head"> <ul> <li class="active"><a class="glyphicons edit" href="#account-details" data-toggle="tab"><i></i>Account details</a></li> <li><a class="glyphicons settings" href="#account-settings" data-toggle="tab"><i></i>Account settings</a></li> </ul> </div> <!-- // Widget heading END --> <div class="widget-body"> <form class="form-horizontal"> <div class="tab-content"> <!-- Tab content --> <div class="tab-pane active" id="account-details"> <!-- Row --> <div class="row"> <!-- Column --> <div class="col-md-6"> <!-- Group --> <div class="form-group"> <label class="col-md-3 control-label">First name</label> <div class="col-md-9"> <div class="input-group"> <input type="text" value="John" class="form-control" /> <span class="input-group-addon" data-toggle="tooltip" data-container="body" data-placement="top" data-original-title="First name is mandatory"><i class="fa fa-question-circle"></i></span> </div> </div> </div> <!-- // Group END --> <!-- Group --> <div class="form-group"> <label class="col-md-3 control-label">Last name</label> <div class="col-md-9"> <div class="input-group"> <input type="text" value="Doe" class="form-control" /> <span class="input-group-addon" data-toggle="tooltip" data-container="body" data-placement="top" data-original-title="Last name is mandatory"><i class="fa fa-question-circle"></i></span> </div> </div> </div> <!-- // Group END --> <!-- Group --> <div class="form-group"> <label class="col-md-3 control-label">Date of birth</label> <div class="col-md-9"> <div class="input-group"> <input type="text" id="datepicker1" class="form-control" value="13/06/1988" /> <span class="input-group-addon"><i class="fa fa-calendar"></i></span> </div> </div> </div> <!-- // Group END --> </div> <!-- // Column END --> <!-- Column --> <div class="col-md-6"> <!-- Group --> <div class="form-group"> <label class="col-md-3 control-label">Gender</label> <div class="col-md-9"> <select class="form-control"> <option>Male</option> <option>Female</option> </select> </div> </div> <!-- // Group END --> <!-- Group --> <div class="form-group"> <label class="col-md-3 control-label">Age</label> <div class="col-md-9"> <input type="text" value="25" class="form-control" /> </div> </div> <!-- // Group END --> </div> <!-- // Column END --> </div> <!-- // Row END --> <div class="separator line bottom"></div> <textarea id="mustHaveId" class="wysihtml5 form-control" rows="5">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.</textarea> <!-- Form actions --> <div class="separator top"> <button type="submit" class="btn btn-primary"><i class="fa fa-fw fa-check"></i> Save changes</button> <button type="button" class="btn btn-default"><i class="fa fa-fw fa-times"></i> Cancel</button> </div> <!-- // Form actions END --> </div> <!-- // Tab content END --> <!-- Tab content --> <div class="tab-pane" id="account-settings"> <!-- Row --> <div class="row"> <!-- Column --> <div class="col-md-3"> <strong>Change password</strong> <p class="muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> <!-- // Column END --> <!-- Column --> <div class="col-md-9"> <label for="inputUsername">Username</label> <div class="input-group"> <input type="text" id="inputUsername" class="form-control" value="john.doe2012" disabled="disabled" /> <span class="input-group-addon" data-toggle="tooltip" data-placement="top" data-container="body" data-original-title="Username can't be changed"><i class="icon-question-sign"></i></span> </div> <div class="separator bottom"></div> <label for="inputPasswordOld">Old password</label> <div class="input-group"> <input type="password" id="inputPasswordOld" class="form-control" value="" placeholder="Leave empty for no change" /> <span class="input-group-addon" data-toggle="tooltip" data-placement="top" data-container="body" data-original-title="Leave empty if you don't wish to change the password"><i class="icon-question-sign"></i></span> </div> <div class="separator bottom"></div> <label for="inputPasswordNew">New password</label> <input type="password" id="inputPasswordNew" class="form-control" value="" placeholder="Leave empty for no change" /> <div class="separator bottom"></div> <label for="inputPasswordNew2">Repeat new password</label> <input type="password" id="inputPasswordNew2" class="form-control" value="" placeholder="Leave empty for no change" /> <div class="separator bottom"></div> </div> <!-- // Column END --> </div> <!-- // Row END --> <div class="separator line bottom"></div> <!-- Row --> <div class="row"> <!-- Column --> <div class="col-md-3"> <strong>Contact details</strong> <p class="muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> <!-- // Column END --> <!-- Column --> <div class="col-md-9"> <div class="row"> <div class="col-md-6"> <label for="inputPhone">Phone</label> <div class="input-group"> <span class="input-group-addon"><i class="fa fa-phone"></i></span> <input type="text" id="inputPhone" class="form-control" placeholder="01234567897" /> </div> <div class="separator bottom"></div> <label for="inputEmail">E-mail</label> <div class="input-group"> <span class="input-group-addon"><i class="fa fa-envelope"></i></span> <input type="text" id="inputEmail" class="form-control" placeholder="contact@mosaicpro.biz" /> </div> <div class="separator bottom"></div> <label for="inputWebsite">Website</label> <div class="input-group"> <span class="input-group-addon"><i class="fa fa-link"></i></span> <input type="text" id="inputWebsite" class="form-control" placeholder="http://www.mosaicpro.biz" /> </div> <div class="separator bottom"></div> </div> <div class="col-md-6"> <label for="inputFacebook">Facebook</label> <div class="input-group"> <span class="input-group-addon"><i class="fa fa-facebook"></i></span> <input type="text" id="inputFacebook" class="form-control" placeholder="mosaicpro" /> </div> <div class="separator bottom"></div> <label for="inputTwitter">Twitter</label> <div class="input-group"> <span class="input-group-addon"><i class="fa fa-twitter"></i></span> <input type="text" id="inputTwitter" class="form-control" placeholder="mosaicpro" /> </div> <div class="separator bottom"></div> <label for="inputSkype">Skype ID</label> <div class="input-group"> <span class="input-group-addon"><i class="fa fa-skype"></i></span> <input type="text" id="inputSkype" class="form-control" placeholder="mySkypeID" /> </div> <div class="separator bottom"></div> <label for="inputgplus">Google</label> <div class="input-group"> <span class="input-group-addon"><i class="fa fa-google-plus"></i></span> <input type="text" id="inputgplus" class="form-control" placeholder="google ID" /> </div> <div class="separator bottom"></div> </div> </div> </div> <!-- // Column END --> </div> <!-- // Row END --> <!-- Form actions --> <div class="form-actions" style="margin: 0;"> <button type="submit" class="btn btn-primary"><i class="fa fa-check"></i> Save changes</button> </div> <!-- // Form actions END --> </div> <!-- // Tab content END --> </div> </form> </div> </div> <!-- // Widget END -->
@import "http://localhost/shared/components/modules/admin/forms/elements/bootstrap-datepicker/assets/lib/css/bootstrap-datepicker.css"; @import "http://localhost/shared/components/modules/admin/forms/elements/bootstrap-datepicker/assets/custom/less/bootstrap-datepicker.less"; @import "http://localhost/shared/components/modules/admin/forms/editors/wysihtml5/assets/lib/css/bootstrap-wysihtml5-0.0.2.css"; @import "assets/components/core/less/widgets.less"; @import "assets/components/modules/admin/ui/buttons/assets/buttons.less"; @import "assets/components/modules/admin/tabs/assets/tabs.less"; @import "assets/components/core/less/forms.less";
<head>
section of your HTML document, before any JavaScript files: <link type="stylesheet/less" href="styles.less" />
NOTE All the styles from the CORE package also need to be imported in this file, before the component imports.
BODY You should include the following scripts at the end of the HTML document, right before the closing </body>
tag.
<script src="assets/components/modules/admin/forms/elements/bootstrap-datepicker/assets/lib/js/bootstrap-datepicker.js?v=v1.2.3"></script> <script src="assets/components/modules/admin/forms/elements/bootstrap-datepicker/assets/custom/js/bootstrap-datepicker.init.js?v=v1.2.3"></script> <script src="assets/components/modules/admin/forms/editors/wysihtml5/assets/lib/js/wysihtml5-0.3.0_rc2.min.js?v=v1.2.3"></script> <script src="assets/components/modules/admin/forms/editors/wysihtml5/assets/lib/js/bootstrap-wysihtml5-0.0.2.js?v=v1.2.3"></script> <script src="assets/components/modules/admin/forms/editors/wysihtml5/assets/custom/wysihtml5.init.js?v=v1.2.3"></script>